<template>
    <v-flex
        xs12
        sm6
        offset-sm3
        md4
        offset-md4
      >
        <v-card>
          <v-card-title><h4>{{ employee.name }}</h4></v-card-title>
          <v-divider></v-divider>
          <v-list dense>
            <v-list-tile>
              <v-list-tile-content>性别:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ employee.gender }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>出生:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ employee.birth_date }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>所属部门:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ employee.department }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>工作电话:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ employee.work_phone }}</v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-content>移动电话:</v-list-tile-content>
              <v-list-tile-content class="align-end">{{ employee.mobile_phone }}</v-list-tile-content>
            </v-list-tile>
            
          </v-list>
        </v-card>
      </v-flex>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
    name: 'employee-details',
    
    data(){
        return{
            
        }
    },
    computed: {
        employee: function(){
            return this.$store.getters.getEmpById(this.$route.params.id)
        }
    }
}
</script>

